<template>
  <div class="flex">
    <el-card class="w-1/3 user" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>{{ t('profile.user.title') }}</span>
        </div>
      </template>
      <ProfileUser />
    </el-card>
    <el-card class="w-2/3 user ml-3" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>{{ t('profile.info.title') }}</span>
        </div>
      </template>
      <div>
        <el-tabs
          v-model="activeName"
          tab-position="top"
          style="height: 400px"
          class="profile-tabs"
        >
          <el-tab-pane
            :label="t('profile.info.basicInfo')"
            name="basicInfo"
          >
            <BasicInfo />
          </el-tab-pane>
          <el-tab-pane
            :label="t('profile.info.resetPwd')"
            name="resetPwd"
          >
            <ResetPwd types="user" />
          </el-tab-pane>
          <el-tab-pane
            v-if="checkPermi(['dy:bindEscrowAccount'])"
            label="绑定第三方账户"
            name="trilateralAccount"
          >
            <div
              v-if="userInfo.wisdomAuthorizeStatus === 1"
              class="item"
            >
              <div>
                <img
                  src="@/assets/imgs/jl-logo.png"
                  alt=""
                />
                智慧计量系统
              </div>
              <div class="jl-account">{{
                userInfo?.wisdomAuthorizeAccountUsername
              }}</div>
              <el-button
                type="warning"
                link
                @click="unbindJLAccount"
                >解绑</el-button
              >
            </div>
            <div v-else class="item">
              <div>
                <img
                  src="@/assets/imgs/jl-logo.png"
                  alt=""
                />
                智慧计量系统
              </div>
              <el-button
                type="primary"
                link
                @click="openJlBindForm"
                >绑定</el-button
              >
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane :label="t('profile.info.resetPayPwd')" name="userSocial">
            <ResetPwd types="pay"/>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </el-card>
  </div>
  <BindJLForm
    ref="bindJLFormRef"
    @success="getUserInfo"
  ></BindJLForm>
</template>
<script setup lang="ts" name="Profile">
import { checkPermi } from '@/utils/permission'
import {
  BasicInfo,
  ProfileUser,
  ResetPwd,
  BindJLForm
} from './components/'
import {
  getUserProfile,
  unbindWisdomAccount
} from '@/api/system/user/profile'
const { t } = useI18n()

const userInfo = ref({})
const bindJLFormRef = ref()
const message = useMessage()
const activeName = ref('basicInfo')

const openJlBindForm = () => {
  bindJLFormRef.value.open()
}

const unbindJLAccount = async () => {
  await message.confirm(
    '解绑之后，将不能从智慧计量系统免登录进入煤市通，您确认解绑吗？',
    '解绑计量账号',
    '确认解绑'
  )
  await unbindWisdomAccount()
  message.success('解绑成功')
  getUserInfo()
}

const getUserInfo = async () => {
  const users = await getUserProfile()
  userInfo.value = users || {}
}

onMounted(async () => {
  await getUserInfo()
})
</script>
<style scoped>
.user {
  max-height: 960px;
  padding: 15px 20px 20px 20px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;

  > div {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    font-family: PingFang SC, PingFang SC-500;
  }

  img {
    width: 30px;
    height: 20px;
    margin-right: 10px;
  }

  .jl-account {
    font-size: 14px;
    font-weight: 400;
  }
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card .el-card__header, .el-card .el-card__body) {
  padding: 15px !important;
}

.profile-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-weight: 600;
}

.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
